<template>

  <div style="display: flex">

    <div style="width: 300px; margin-right: 20px" >

      <el-card class="info-card">

        <el-descriptions :column="1" title="用户信息">
          <el-descriptions-item label="账号">{{ userData.userName }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ userData.realName }}</el-descriptions-item>
          <el-descriptions-item label="积分">
            <div style="color: #ff0000; font-weight: 700">{{ userData.points }}</div>
          </el-descriptions-item>
        </el-descriptions>

        <div>
          <el-button size="small" style="width: 100%" type="primary" icon="el-icon-plus" @click="showIncr">积分赠送</el-button>
        </div>

        <div style="padding-top: 10px">
          <el-button size="small" style="width: 100%" type="danger" icon="el-icon-minus" @click="showSub">积分扣减</el-button>
        </div>

      </el-card>

    </div>

    <div style="flex-grow: 1">

      <data-table
        ref="pagingTable"
        :options="options"
        :list-query="listQuery"
      >

        <template #filter-content>

          <el-input v-model="listQuery.params.refRemark" size="small" style="width: 200px" placeholder="搜索备注信息" class="filter-item" />

        </template>

        <template #data-columns>

          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column
            align="center"
            label="时间"
            prop="createTime"
            width="200px"
          />

          <el-table-column
            align="center"
            label="积分数量"
            prop="points"
            width="120px"
          />

          <el-table-column
            label="备注"
            prop="refRemark"
          />

        </template>
      </data-table>

    </div>

    <points-give-dialog :visible.sync="dialogVisible" :user-id="userId" :opt="opt" @success="handleRefresh"/>

  </div>

</template>

<script>

import { fetchDetail } from '@/api/sys/user/user'

import PointsGiveDialog from '@/views/admin/sys/user/points/components/PointsGiveDialog.vue'


export default {
  components: { PointsGiveDialog },
  data() {
    return {

      dialogVisible: false,
      userId: '',
      opt: 1,

      userData: {

      },

      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/user/points/paging'
      }
    }
  },

  created() {
    this.userId = this.$route.params.id
    this.listQuery.params.userId = this.userId
    this.showInfo()
  },

  methods: {

    // 显示信息用于编辑
    showInfo() {
      fetchDetail(this.userId).then(res => {
        this.userData = res.data
      })
    },

    showIncr() {
      this.opt = 1
      this.dialogVisible = true
    },

    showSub() {
      this.opt = 2
      this.dialogVisible = true
    },

    handleRefresh() {
      this.$refs.pagingTable.getList()
      this.showInfo()
    }

  }
}
</script>

<style scoped>
.info-card{
  height: calc(100vh - 124px); overflow-y: auto
}
</style>
